<template>
  <div class="orderPre orderLayout">
    <div class="content">
      <div class="banner">
         <img
          v-show="pType === 1"
          src ="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/01201.jpg"
        />
        <img
          v-show="pType === 0"
          src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/1121_product.jpg"
        />
      </div>
      <div class="purchaseNum">
        <div>
          <p>购买数量</p>
        </div>
        <div
          style="display: flex; justify-content: flex-end; align-items: center"
        >
          <img
            src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/decre.png"
            @click="reduceNum()"
          />
          <input type="text" disabled name="" v-model="num" />
          <img
            src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/incre.png"
            @click="increaseNum()"
          />
        </div>
      </div>
      <div class="purchaseNum">
        <div>
          <p>购买规格</p>
        </div>
        <div
          style="display: flex; justify-content: flex-end; align-items: center"
        >
          <div
            class="p-type"
            @click="changeType(1)"
            :class="{ active: pType === 1 }"
          >
            EPA
          </div>
          <div
            class="p-type"
            @click="changeType(0)"
            :class="{ active: pType === 0 }"
          >
            欧米伽3
          </div>
        </div>
      </div>

      <div class="img-wrap history" v-show="pType === 1">
        <img
          @click="goToTest()"
          style="margin-bottom: 15px"
          src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jcjh.png"
        />
        <img
          src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/01202.jpg"
        />
         <img
          src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/01203.jpg"
        />
        
      </div>

      <div class="img-wrap history" v-show="pType === 0">
        <img
          @click="goToTest()"
          style="margin-bottom: 15px"
          src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/jcjh.png"
        />
        <!-- <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_1.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_2.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_3.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_4.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_5.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_6.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_7.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_8.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_9.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_10.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_11.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_12.gif" />
        <img src="http://cdn.gee4.cn/zw-wx/wx-vue-img-v2/img/cp/xqy_13.png" /> -->
        <img
          src="https://img10.360buyimg.com/imgzone/jfs/t1/228733/28/18/84735/652cd0b9F3878b0f0/84d7d577729ac3ee.jpg"
        />
        <img
          src="https://img12.360buyimg.com/cms/jfs/t1/103653/12/35388/64308/653ca1d9F6240cec7/3f0f6499549219e1.jpg"
        />
        <img
          src="https://img14.360buyimg.com/cms/jfs/t1/225182/6/1355/47126/653ca1d9F7f746308/9f4518698f493178.jpg"
        />
      </div>
    </div>
    <div class="fixnav">
      <div class="info">
        <div>
          <span>总计</span>
        </div>
        <div>
          <ul>
            <li class="amount">
              <span>&yen;</span> {{ totalPrice }}
              <span
                style="color: #b7bcb8"
                v-if="totalPrice != totalOriginalPrice"
              >
                (
                <span class="origin">&yen;{{ totalOriginalPrice }}</span>
                )
              </span>
            </li>
            <!-- <li class="tips">7折</li> -->
          </ul>
        </div>
      </div>
      <div class="btn" @click="toBuy()">
        <span>立即购买</span>
      </div>
    </div>
    <div class="floating-button" @click="toList()">我的订单</div>
  </div>
</template>
<script>
import { Toast, MessageBox } from "mint-ui";
import { mapGetters, mapActions } from "vuex";
import { wxshare } from "common/mixin";
export default {
  mixins: [wxshare],
  data() {
    return {
      num: this.$route.query.num || 1,
      from: this.$route.query.from || "",
      giftNum: 0,
      scoreNum: 0,
      productInfo: [],
      totalPrice: null,
      totalOriginalPrice: null,
      insiderAvailableQuota: 0,
      pType: 1,
    };
  },
  watch: {
    num: function (newVal) {
      // this.giftNum = parseInt(newVal / 10) * 1;
      // if (newVal > 0) {
      //   this.totalPrice = (
      //     this.productInfo[this.pType].price *
      //     newVal *
      //     0.7
      //   ).toFixed(0);
      // } else {
      //   this.totalPrice = parseInt(this.productInfo[this.pType].price * newVal);
      // }
      this.totalPrice = this.productInfo[this.pType].insiderPrice * newVal;
      this.totalOriginalPrice = this.productInfo[this.pType].price * newVal;
    },
  },
  computed: {
    ...mapGetters(["phone", "insiderName"]),
  },
  methods: {
    ...mapActions({
      GetProducts: "GetProducts",
      GetInsiderAvailableQuota: "GetInsiderAvailableQuota",
    }),
    reduceNum: function () {
      if (this.num == 1) {
        this.num = 1;
      } else {
        this.num = parseInt(this.num) - 1;
      }
    },
    increaseNum: function () {
      let isInsider = this.insiderName && this.from == "insider";
      this.num = parseInt(this.num) + 1;
    },
    // 注册会员
    register: function () {
      this.$router.push({ path: "editInfo" });
    },
    toBuy: function (type) {
      location.href = `order/orderConfirm?rate=0.7&num=${this.num}&pType=${
        this.pType + 1
      }&name=${this.productInfo[this.pType].name}&insiderPrice=${
        this.productInfo[this.pType].insiderPrice
      }&price=${this.productInfo[this.pType].price}&pid=${
        this.productInfo[this.pType].id
      }&from=${this.from}&insiderAvailableQuota=${this.insiderAvailableQuota}`;
    },
    toList() {
      this.$router.push({ path: "/order/orderList" });
    },
    goToTest() {
      this.$router.push({ path: "orderPreTest" });
    },
    changeType(pType) {
      this.pType = pType;
      var newVal = this.num;
      // if (newVal > 0) {
      //   this.totalPrice = (
      //     this.productInfo[this.pType].price *
      //     newVal *
      //     0.7
      //   ).toFixed(0);
      // } else {
      //   this.totalPrice = parseInt(this.productInfo[this.pType].price * newVal);
      // }
      //  this.totalPrice = (
      //     this.productInfo[this.pType].price *
      //     newVal *
      //     0.07
      //   ).toFixed(0)*10;
      this.totalPrice = this.productInfo[this.pType].insiderPrice * newVal;
      this.totalOriginalPrice = this.productInfo[this.pType].price * newVal;
    },
  },
  mounted() {
    this.GetProducts().then((result) => {
      console.log("result", result);
      // this.totalPrice = (result.data[0].price*0.07).toFixed(0)*10;
      this.totalPrice = result.data[this.pType].insiderPrice;
      this.totalOriginalPrice = result.data[this.pType].price;
      this.productInfo = result.data;
    });
  },
};
</script>
<style lang="less">
@import "./orderPre.less";
</style>
